<template>
  <div >
    <div style="padding-bottom: 50px">
      <div v-for="(item,index) in formdata" :key="index">
        <div v-if="index==0||(index>0&&formdata[index].name!=formdata[index-1].name)" class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
          <div class="blue_item" />
          <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">{{ item.name }}</span>
        </div>
          <div style="padding: 10px;font-size: 16px;">{{item.value}}
            <div v-if="index==0"><van-button plain type="info" @click="showXuZhi()" style="height: 30px;margin-top: 10px">查看须知</van-button>
            </div>
            <div v-else>
              <van-radio-group v-model="item.result" direction="horizontal" style='margin-top: 10px;margin-left: 10px'>
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
<!--              <el-input style="padding: 0px 15px;margin-top: 5px"-->
<!--                        type="textarea"-->
<!--                        :rows="2"-->
<!--                        placeholder="备注"-->
<!--                        v-model="item.beizhu">-->
<!--              </el-input>-->
            </div>
          </div>
      </div>
      <div  class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
        <div class="blue_item" />
        <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">意见建议</span>
      </div>
      <div v-for="(item,index) in suggesList" :key="'suggesList'+index">
        <van-button v-if="index==0" plain type="info" @click="addSuggesList()" style="height: 30px;margin-top: 10px;margin-left: 15px">新增意见</van-button>
        <van-button v-else plain type="danger" @click="deleteSuggesList(index)" style="height: 30px;margin-top: 10px;margin-left: 15px">删除意见</van-button>
        <van-field v-model="item.opinionValue" readonly center clearable label="分类" placeholder="请选择意见分类" :right-icon="'arrow'" @click="showChosePop(index)"/>
        <van-field v-model="item.opinionRemark" rows="1" autosize label="情况填报" type="textarea" placeholder="请输入内容" :right-icon="'arrow'"/>
        <div class="border-b-1">
          <van-field label-width="10em" readonly
                     label="附件:" class="lyy-width" input-align="left" placeholder="" >
          </van-field>
          <template >
            <template v-if="file_is_show">
              <div v-for="(item2,fileIndex) in item.opinionAnnex" :key="'opinionAnnex'+fileIndex" class="fileBox">
                <div class="font14 fileLink" style="color:#0F85CF">
                  <a target="_blank" @click="openFileUrlfun(item2.anonymousFilePath)">{{item2.fileName}}</a>
                </div>
                <span class="font12 color-red ml5" @click="uploadFileDelete(index,fileIndex)">X</span>
              </div>
            </template>
            <div action="" class="font14 file" style="height:46px;text-align:right;padding-right:20px" @click="setFileIndex(index)">
              <van-uploader v-model="fileList" :after-read="fileUpload"  :preview-image='false' >
                <van-button icon="plus" type="primary" color="#60a9ec" >上传文件</van-button>
              </van-uploader>
            </div>
          </template>
        </div>
      </div>
      <van-popup v-model="showPopup" position="bottom" style="padding:20px 0 20px 0;height: 80%;border-radius:15px 15px 0px 0px " get-container="#showpop">
        <div style="padding: 10px;font-size: 16px;">{{ infosName }}</div>
        <div v-for="(item,index) in huodongInfos" :key="'huodongInfos'+index" style="display: flex">
            <span class="font15" style="padding:15px;  flex:1;color: red;line-height: 30px">{{ item.red }}<span style="color: #222222">{{ item.value }}</span></span>
        </div>
        <div style="display: flex;margin: 35px 25px;border-radius: 15px" >
          <van-button style="background: #00a0e9;color: white" class="bg-theme color-f ht46 font15 flex1" @click.native="closePopup()">开始跟装</van-button>
        </div>
      </van-popup>
      <van-popup v-model="showXuzhiPopup" position="bottom" style="padding:20px 0 20px 0;height: 80%;border-radius:15px 15px 0px 0px " get-container="#showpop">
        <div style="padding: 10px;font-size: 16px;">{{ xuzhiTitle }}</div>
        <div v-for="(item,index) in xuzhiInfos" :key="'xuzhiInfos'+index" style="display: flex">
          <span class="font15" style="padding:0px 15px;  flex:1;color: red;line-height: 20px">{{ item.red }}<span style="color: #222222">{{ item.value }}</span></span>
        </div>
        <div style="display: flex;margin: 35px 25px;border-radius: 15px" >
          <van-button style="background: #00a0e9;color: white" class="bg-theme color-f ht46 font15 flex1" @click.native="closePopup()">确定</van-button>
        </div>
      </van-popup>

    </div>
    <van-popup v-model="showTypePicker" position="bottom">
      <van-picker
          show-toolbar
          :columns="showTypecolumns"
          @confirm="showTypePickeronConfirm"
          @cancel="showTypePicker = false"
      />
    </van-popup>
    <div  style="margin-top: 20px">
      <div class="pof-btn" >
        <van-button style="background: #00a0e9;color: white" class="bg-theme color-f ht46 font15 flex1" native-type="submit" @click.native="onSubmit('pass')">提交</van-button>
      </div>
    </div>
  </div>
</template>

<script>
//判断是否等于上一个模块的名称，来显示隐藏大模块/sys/dictValue/findDictValue
import {req, reqNoAction, uploadProcessFiles} from '@/api/gettodo';
import { mapGetters } from "vuex";
import {Notify, Toast} from 'vant';
import util from '@/assets/js/public';
import {openFileUrl} from '@/store/openFile';
export default {
  name: "newDetail",
  data() {
    return {
      showPopup:true,
      infosName:'',
      huodongInfos:[],
      formdata: [],
      operationList:[],
      gridName:'',
      showXuzhiPopup:false,
      xuzhiTitle:'',
      xuzhiInfos:[],
      showTypePicker:false,
      showTypecolumns:[],
      showTypeList:[],
      suggesList:[{opinionType:'',opinionValue:'',opinionRemark:'',opinionAnnex:[]}],
      choseIndex:0,
      fileList:[],
      file_is_show:true,
      suggesIndex:0
    };
  },
  created() {},
  activated() {
    this.getInfos();
    this.getData();
    this.getGridName();
    this.getChoseData()
  },
  methods: {
    showXuZhi(){
      this.showXuzhiPopup=true
    },
    addSuggesList(){
      this.suggesList.push({opinionType:'',opinionValue:'',opinionRemark:'',opinionAnnex:[]})
    },
    deleteSuggesList(index){
      this.suggesList.splice(index,1);
    },
    showChosePop(index){
      this.showTypePicker=true
      this.choseIndex=index
    },
    showTypePickeronConfirm(value,index){
      console.log("列表数据是"+index)
      this.suggesList[this.choseIndex].opinionValue=value
      this.suggesList[this.choseIndex].opinionType=this.showTypeList[index].value
      this.showTypePicker=false
    },
    onSubmit(type) {
      this.operationList=[]
      var haveEditAll=true
      for (var i in this.formdata){
        if (i==0||(this.formdata[i].result=='0'||this.formdata[i].result=='1')){
          console.log('去提交'+this.formdata[i].result)
          this.operationList.push({ dictId: this.formdata[i].id,
            dictValue: this.formdata[i].value,
            dictName: this.formdata[i].name,
            operationInfo:i==0?'':this.formdata[i].result,
            // remarkInfo:this.formdata[i].beizhu
          })
        }else {
          haveEditAll=false
          break
        }
      }
      var itemInfoList=[]
      for (var i in this.suggesList){
        itemInfoList.push({ opinionType: this.suggesList[i].opinionType,
          opinionAnnex: this.suggesList[i].opinionAnnex,
          opinionRemark:this.suggesList[i].opinionRemark})
      }
      if (haveEditAll==true){
        console.log('去提交表单'+JSON.stringify(this.operationList))
        console.log('去提交建议'+JSON.stringify(itemInfoList))
        Toast.loading({
          message: "提交中...",
          forbidClick: false,
        });///action/usLhgzhdInfo/insertInfo
        req('djfupt','usLhgzhdInfo$insertInfo$api',
            Object.assign({
                  kv: {
                    "source": 'MOBILE',
                    "currentUserCode": util.encrypt(this.user.userName),
                  },
                  body: {
                    "operationList": this.operationList,
                    "itemInfoList": itemInfoList,
                    "gridName":this.gridName
                  }
                }
            ))
            .then((result) => {
              Toast.clear();
              if (!result.data) {
                Notify(result.message);
                return;
              }
              Notify({ type: 'success', message: '提交成功' })
              this.$router.replace(
                  {
                    name:'mainview',
                    query:{
                    }
                  }
              )
            })
      }else {
        Notify({ type: 'warning', message: '请填写所有项目再提交' })
      }
    },
    getInfos(){
      Toast.loading({
        message: "加载中...",
        forbidClick: false,
      });
      reqNoAction('djfupt','sys$dict$api$findOne',
          Object.assign({
                kv: {
                  "source": 'MOBILE',
                  "currentUserCode": util.encrypt(this.user.userName),
                  "dictType": 'XTGJ_LHGZHD_TYPE',
                },
                body: {
                  "dictType": 'XTGJ_LHGZHD_TYPE',
                }
              }
          ))
          .then((result) => {
            Toast.clear();
            if (!result.data) {
              Notify(result.message);
              return;
            }
            this.huodongInfos=[]
            if (result.data.data) {
              this.infosName=result.data.data.name
              var lineList = result.data.data.description.split('\n');
              var showList=[]
              for (var i in lineList){
                var lines = lineList[i].split('：');
                showList.push({red:lines[0]+"：",value:lines[1]})
              }
              this.huodongInfos=showList
            }
          })
    },
    closePopup(){
      this.showPopup=false
      this.showXuzhiPopup=false
    },
    getData() {
      Toast.loading({
        message: "加载中...",
        forbidClick: false,
      });
      reqNoAction('djfupt','sys$dictValue$findDictValue$api',
          Object.assign({
                kv: {
                  "source": 'MOBILE',
                  "currentUserCode": util.encrypt(this.user.userName),
                  "dictType": 'XTGJ_LHGZHD_TYPE',
                },
                body: {
                  "dictType": 'XTGJ_LHGZHD_TYPE',
                }
              }
          ))
          .then((result) => {
            Toast.clear();
            if (!result.data) {
              Notify(result.message);
              return;
            }
            this.formdata=[]
            if (result.data.data) {
              this.formdata=result.data.data
              this.xuzhiInfos=[]
              if (result.data.data) {
                this.xuzhiTitle=result.data.data[0].spare1
                var lineList = result.data.data[0].spare2.split('\n');
                console.log("处理后的数据是"+JSON.stringify(lineList))
                var showList=[]
                for (var i in lineList){
                  if ( lineList[i].indexOf('：')){
                    var number = lineList[i].indexOf('：');
                    showList.push({red:lineList[i].substring(0,number),value:lineList[i].substring(number)})
                  }else {
                    showList.push({red:"",value:lineList[i]})
                  }
                }
                console.log("处理后的数据是"+JSON.stringify(showList))
                this.xuzhiInfos=showList
              }
            }
          })
    },
    getGridName(){
      Toast.loading({
        message: "加载中...",
        forbidClick: false,
      });
      req('djfupt','usZwrgdyInfo$getGridName$api',
          Object.assign({
                kv: {
                  "source": 'MOBILE',
                  "currentUserCode": util.encrypt(this.user.userName),
                }
              }
          ))
          .then((result) => {
            Toast.clear();
            if (!result.data) {
              Notify(result.message);
              return;
            }
            if (result.data.data) {
              this.gridName=result.data.data.gridName
            }
          })
    },
    getChoseData(){
      Toast.loading({
        message: "加载中...",
        forbidClick: false,
      });
      reqNoAction('djfupt','sys$dictValue$findDictValue$api',
          Object.assign({
                kv: {
                  "source": 'MOBILE',
                  "currentUserCode": util.encrypt(this.user.userName),
                  "dictType": 'XTGJ_LHGZHD01_TYPE',
                },
                body: {
                  "dictType": 'XTGJ_LHGZHD01_TYPE',
                }
              }
          ))
          .then((result) => {
            Toast.clear();
            if (!result.data) {
              Notify(result.message);
              return;
            }
            if (result.data.data) {
              this.showTypecolumns= []
              this.showTypeList=[]
              this.showTypeList=result.data.data
              for (var i in result.data.data){
                this.showTypecolumns.push(result.data.data[i].name)
              }
            }
          })
    },
    openFileUrlfun(value){
      this.$router.push(
          {
            name:'fileview',
            query:{
              openFileUrl: openFileUrl(value)
            }
          }
      );
    },
    fileUpload(file,detail){
      let dataurl=file.content;
      let arr = dataurl.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      var filename=    this.fileList[0].file.name;
      let fileData = new FormData();
      fileData.append('pmInsType', 'A');
      fileData.append('pmInsTypePart', '1');
      fileData.append('files', new File([u8arr], filename+"", {
        type: mime
      }));
      this.fileList=[];
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
      uploadProcessFiles(fileData,Object.assign({userName:this.user.userName}))
          .then(res=>{
            Toast.clear();
            if(!res.data){
              Notify(res.message);
              return;
            }
            this.file_is_show=false;
            if(this.suggesList[this.suggesIndex].opinionAnnex!=null){
              let listdetails = this.suggesList[this.suggesIndex].opinionAnnex;
              listdetails= listdetails.concat(res.data.data.sysFiles);
              this.suggesList[this.suggesIndex].opinionAnnex=listdetails;
            }else{
              this.suggesList[this.suggesIndex].opinionAnnex=[];
              this.suggesList[this.suggesIndex].opinionAnnex=res.data.data.sysFiles;
            }
            this.file_is_show=true;
          })
          .catch(err=>{
            Toast.clear();
            Notify('上传失败');
          })
      // drawFiles
    },uploadFileDelete(index,index2){
      this.file_is_show=false;
      this.suggesList[index].opinionAnnex.splice(index2,1);
      this.file_is_show=true;
    },setFileIndex(index){
      console.log('当前选中的模块是'+index)
      this.suggesIndex=index
      // this.$refs.uploader.upload();
    }
  },
  computed: {
    ...mapGetters(["user"]),
  },
  watch: {

  },
};
</script>

<style>

</style>